<template>
	<div>
		<div class="box">
			<div class="title">维保信息</div>
			<uni-forms
				ref="form"
				:model="currentInfoData"
				validate-trigger="bind"
				:label-position="state == 'write' ? 'top' : 'left'"
				label-width="auto">
				<FromItem
					class="test"
					label="年行驶公里数"
					:required="true"
					:state="state"
					name="maintenanceAnnualMileageKey">
					<ASelectUni
						:state="state"
						v-model="currentInfoData.maintenanceAnnualMileageKey"
						:dict="{
							list: maintenanceAnnualMileageKeyList,
						}"></ASelectUni>
				</FromItem>

				<FromItem
					label="是否包含维保"
					:required="true"
					:state="state"
					name="maintenanceType"
					v-if="showMaintenanceType">
					<view v-if="state == 'readonly'">
						{{
							A_review({
								value: currentInfoData.maintenanceType,
								dict: {
									list: maintenanceTypeList,
								},
							})
						}}
					</view>
					<ARadioGroup
						v-else
						:state="state"
						:disabled="state == 'disabled'"
						v-model="currentInfoData.maintenanceType"
						:dict="{ list: maintenanceTypeList }"
						@change="change_maintenanceType"></ARadioGroup>
				</FromItem>
				<FromItem
					label="供应商"
					:required="true"
					:state="state"
					name="maintenanceSupplierId"
					v-if="currentInfoData.maintenanceType == '1'">
					<ASelectUni
						:state="state"
						v-model="currentInfoData.maintenanceSupplierId"
						:dict="{
							list: maintenanceSupplierIdList,
						}"
						@change="change_maintenanceSupplierId"></ASelectUni>
				</FromItem>
				<FromItem
					label="合同是否限制里程"
					:required="true"
					:state="state"
					name="maintenanceMileageType">
					<view v-if="state == 'readonly'">
						{{
							A_review({
								value: currentInfoData.maintenanceMileageType,
								dict: {
									list: dict.type
										.quota_maintenance_mileage_type,
								},
							})
						}}
					</view>
					<ARadioGroup
						v-else
						:state="state"
						:disabled="state == 'disabled'"
						v-model="currentInfoData.maintenanceMileageType"
						:dict="{
							list: dict.type.quota_maintenance_mileage_type,
						}"></ARadioGroup>
				</FromItem>
				<FromItem
					label="维保套餐"
					:required="true"
					:state="state"
					name="maintenanceMealType"
					v-if="
						currentInfoData.maintenanceType == '1' &&
						config.businessSource == '2'
					">
					<view v-if="state == 'readonly'">
						{{
							A_review({
								value: currentInfoData.maintenanceMealType,
								dict: {
									list: planDicts.packagelList,
									label: 'maintenancePackageName',
									value: 'id',
								},
							})
						}}
					</view>
					<ARadioGroup
						v-else
						:state="state"
						:disabled="state == 'disabled'"
						v-model="currentInfoData.maintenanceMealType"
						:dict="{
							list: planDicts.packagelList,
							label: 'maintenancePackageName',
							value: 'id',
						}"
						@change="change_maintenanceMealType"></ARadioGroup>
				</FromItem>
			</uni-forms>
			<uni-table
				border
				stripe
				emptyText="暂无更多数据"
				class="table"
				v-if="
					currentInfoData.maintenanceType == '1' &&
					config.businessSource == '2'
				">
				<uni-tr>
					<uni-th align="center" width="200rpx">类别</uni-th>
					<uni-th align="center" width="300rpx">保养范围</uni-th>
					<uni-th align="center" width="100rpx">次数</uni-th>
				</uni-tr>
				<uni-tr
					v-for="(item, index) in currentInfoData.maintenanceList">
					<uni-td align="center" class="td">
						{{ item.maintenanceItemTypeStr || '-' }}
					</uni-td>
					<uni-td align="center" class="td">
						{{ item.maintenanceItemDetails || '-' }}
					</uni-td>
					<uni-td align="center" class="td">
						{{ item.maintenanceCount || '-' }}
					</uni-td>
				</uni-tr>
			</uni-table>
		</div>
	</div>
</template>

<script>
	import FromItem from '../formItem/index.vue';
	export default {
		name: '',
		components: {
			FromItem,
		},
		dicts: [
			'quota_maintenance_mileage_type',
			'main_tenance_item',
			'main_tenance_service',
		],
		props: {},
		inject: [
			'details_provide',
			'config_provide',
			'deptList_provide',
			'state_provide',
			'planDicts_provide',
		],
		data() {
			return {};
		},
		computed: {
			details() {
				return this.details_provide();
			},
			config() {
				return this.config_provide();
			},
			deptList() {
				return this.deptList_provide();
			},
			state() {
				return this.state_provide();
			},
			planDicts() {
				return this.planDicts_provide();
			},
			currentInfoData() {
				return this.details.productList?.[0] ?? {};
			},
			maintenanceAnnualMileageKeyList() {
				let arr = [],
					start = 10000,
					end = 80000;
				// let item = this.config?.quotationCustomerTypeIrrList?.find(
				// 	e => e.quotationCustomerTypeId == this.details.customerType,
				// );
				// if (item?.residualValueBusinessType == 1) {
				// 	// 个人
				// 	end = 20000;
				// } else {
				// 	// 企业
				// 	end = 80000;
				// }

				for (let i = start; i <= end; i += 10000) {
					arr.push({
						label: i.toString(),
						value: i.toString(),
					});
				}
				return arr;
			},
			showMaintenanceType() {
				return (
					this.maintenanceTypeList?.length > 0 &&
					(this.config?.businessSource == '1' ||
						this.details.carType !== '1' ||
						(this.config?.businessSource == '2' &&
							this.currentInfoData.insuranceBuyType == '2'))
				);
			},
			maintenanceTypeList() {
				let arr = [];
				if (
					this.config?.quotationProductSchemeAttributeOption?.hasMaintenanceOptions?.includes(
						1,
					)
				) {
					arr.push({
						label: '是',
						value: '1',
					});
				}
				if (
					this.config?.quotationProductSchemeAttributeOption?.hasMaintenanceOptions?.includes(
						0,
					)
				) {
					arr.push({
						label: '否',
						value: '2',
					});
				}
				return arr;
			},
			maintenanceSupplierIdList() {
				return [
					{
						label: '4s',
						value: '1',
					},
					{
						label: '维修厂',
						value: '2',
					},
				];
			},
			mainTenanceList() {
				return [
					...this.dict.type.main_tenance_item,
					...this.dict.type.main_tenance_service,
				];
			},
		},
		filters: {},
		created() {
			if (this.Empty(this.currentInfoData.maintenanceMileageType)) {
				this.currentInfoData.maintenanceMileageType = '1';
			}
		},
		mounted() {},
		methods: {
			change_maintenanceMealType({ val, item }) {
				this.$set(
					this.currentInfoData,
					'maintenanceMealTypeStr',
					item.maintenancePackageName,
				);
				this.setMaintenanceList(item);
			},
			setMaintenanceList(item) {
				let list = [];
				this.$set(this.currentInfoData, 'maintenanceList', []);
				for (const [key, value] of Object.entries(
					item?.maintenanceServiceMap ?? [],
				)) {
					let dictItem = this.mainTenanceList.find(
						e => e.label == value,
					);
					list.push({
						maintenanceItemTypeStr: value,
						maintenanceItemDetails:
							dictItem?.raw?.remark ?? undefined,
						maintenanceCount: undefined,
					});
					this.$set(this.currentInfoData, 'maintenanceList', list);
				}
			},
			change_maintenanceSupplierId({ val }) {
				if (val == '1') {
					this.$set(
						this.currentInfoData,
						'maintenanceSupplierName',
						'4s',
					);
					this.currentInfoData.maintenanceSupplierName = '4s';
				} else if (val == '2') {
					this.$set(
						this.currentInfoData,
						'maintenanceSupplierName',
						'维修厂',
					);
				} else {
					this.$set(
						this.currentInfoData,
						'maintenanceSupplierName',
						undefined,
					);
				}
			},
			change_maintenanceType({ val }) {
				this.$set(
					this.currentInfoData,
					'maintenanceSupplierId',
					undefined,
				);
				this.$set(
					this.currentInfoData,
					'maintenanceSupplierName',
					undefined,
				);
				this.$set(
					this.currentInfoData,
					'maintenanceMealType',
					undefined,
				);
				if (val == '2') {
					this.currentInfoData.maintenanceList = [];
					this.details.productList?.map(item => {
						this.$set(item, 'maintenancePrice', undefined);
						item.planConf.maintenancePrice_state = '';
					});
				}
			},
		},
		beforeDestroy() {
			if (this.notEmpty(this.details?.productList?.[this.index])) {
				this._resetFields([
					{
						data: this.currentInfoData,
					},
				]);
				this.currentInfoData.maintenanceList = [];
			}
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		margin: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 8rpx;

		.title {
			border-bottom: 1px solid #e9e9e9;
			font-weight: 500;
			padding-bottom: 10rpx;
			margin-bottom: 10rpx;
		}
	}
</style>
